<!-- 物流线路 - 表单编辑页面 -->
<template>
  <div class="page-container">

    <!-- title -->
    <div class="page-content-title">
      <!--      当前位置：新增保险产品-->
      {{$tt('label_current_position')}}：{{ $tt('物流轨迹导入') }}
    </div>

    <el-form ref="formEl" :model="formValue" label-width="0px" class="common-form-panel-div" style="margin-top: 20px;">

      <el-row>
        <el-col :span="2">
          <!-- 最大投保金额 -->
          <el-form-item >

            <el-upload
              class="upload-demo"
              drag
              action="/tms-api/transport/TmsTrackRpc/manual_upload.json"
              :on-success="onSuccess"
              :on-error="onError"
              >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>

            <div class="el-upload__tip" style="width: 100%; font-size: 14px; color: #666; " >
              只能上传 xls/xlsx 文件，且不超过 1Mb
              <a
                style="margin-left: 20px;"
                href="https://kyb-bronze-public-oss.oss-cn-shenzhen.aliyuncs.com/default_template/%E8%BD%A8%E8%BF%B9%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF--%E6%B5%B7%E5%A4%96%E4%BB%93.xlsx"
                target="_blank">模板下载</a>
            </div>

          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="trackDataList && trackDataList.length > 0">
        <el-col :span="3">
          <!-- 保费比例 -->
          <el-form-item >

            <div  style="display: flex;">
              <div style="width: 240px;">跟踪号</div>
              <div>
                <div  style=" flex: 1; display: flex; ">
                  <div style="width: 200px; ">时间</div>
                  <div>跟踪信息</div>
                </div>
              </div>
            </div>

            <div v-for="item,index in trackDataList" style="display: flex;">
              <div style="width: 240px;">{{item.trackNo}}</div>
              <div>
                <div v-for="subItem,subIndex in item.trackList" style=" flex: 1; display: flex; ">
                    <div style="width: 200px; ">{{ $dateFormat(subItem.trackTime) }}</div>
                    <div style="width: 400px;  white-space: normal;  word-break: break-all;">
                      {{ subItem.trackDesc }}
                      {{ subItem.trackRemark ?  ' （'+ subItem.trackRemark + '）' : '' }}
                    </div>
                </div>
              </div>

            </div>

          </el-form-item>
        </el-col>
      </el-row>


    </el-form>

<!--    <div style="position: relative; left: 140px; margin-top: 30px; margin-bottom: 20px;">-->
<!--      &lt;!&ndash; 提 交 &ndash;&gt;-->
<!--      <el-button type="primary" @click="submitForm()">{{$tt('label_submit')}}</el-button>-->
<!--      &lt;!&ndash; 返 回 &ndash;&gt;-->
<!--      <el-button @click="return_page_back()">{{$tt('label_cancel')}}</el-button>-->

<!--    </div>-->

  </div>
</template>
<script>

  import router_params from '@/mixin/router_params';
  let moduleName = "物流轨迹导入"

  export default {

    title: moduleName,
    components: {   },
    mixins: [router_params],
    data() {

      return {

        trackDataList: [],
        formValue:{}

      };
    },

    created() {


    },

    mounted() {

    },
    methods: {

      onSuccess(response, file, fileList){
        if(response.code == 0){
          this.$message({
            type: 'success',
            message: '导入成功'
          })
          this.trackDataList = response.data.rows

          console.log(JSON.stringify(this.trackDataList))
        }
        else{
          this.$message({
            type: 'error',
            message: response.message
          })
        }
      },

      onError(err, file, fileList){
        this.$message({
          type: 'error',
          message: '导入失败：' + err
        })
      },

      submitForm() {

        this.$ajax({
          url: '/fms-api/product/PmsInsuranceProductRpc/saveUpdate.json',
          type: 'json',
          data: _this.formValue,
          success: (responseData) => {
            this.$message({
              showClose: true,
              message: '提交成功',
              type: 'success'
            })

            this.return_emit(null, "reload")
            this.return_page_back()

          }
        });


      },


    }
  };

</script>
<style>
</style>
